﻿(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var ui = WinJS.UI;
    var currentGalleryName = null;

    ui.Pages.define("/pages/items/items.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // Initialize PhotoDB
            PhotoDB.initializeGallery(Data.loadGalleryAtIndex, 0);

            // Initialize Appbar
            initializeAppBar();

            // Initialize List View
            var listView = element.querySelector(".itemslist").winControl;
            listView.itemDataSource = Data.groups.dataSource;            
            listView.itemTemplate = element.querySelector(".itemtemplate");
            listView.oniteminvoked = this._itemInvoked.bind(this);

            this._initializeLayout(listView, Windows.UI.ViewManagement.ApplicationView.value);
            listView.element.focus();

            // Initialize semantic zoomout view
            var zoomoutView = element.querySelector(".zoomoutView").winControl;
            zoomoutView.itemDataSource = Data.groups.groups.dataSource;
            zoomoutView.itemTemplate = element.querySelector(".semanticZoomTemplate");            
            this._initializeLayout(zoomoutView, Windows.UI.ViewManagement.ApplicationView.value);

            WinJS.UI.processAll(element);
        },

        // This function updates the page layout in response to viewState changes.
        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            var listView = element.querySelector(".itemslist").winControl;
            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                    var handler = function (e) {
                        listView.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                    }
                    listView.addEventListener("contentanimating", handler, false);
                    var firstVisible = listView.indexOfFirstVisible;
                    this._initializeLayout(listView, viewState);
                    if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                        listView.indexOfFirstVisible = firstVisible;
                    }
                }
            }
        },

        // This function updates the ListView with new layouts
        _initializeLayout: function (listView, viewState) {
            /// <param name="listView" value="WinJS.UI.ListView.prototype" />

            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
            } else {
                listView.layout = new ui.GridLayout();
            }
        },

        _itemInvoked: function (args) {
            var dfa = Data.groups.getAt(args.detail.itemIndex);
            var pageURL = Data.groups.getAt(args.detail.itemIndex).url;
            WinJS.Navigation.navigate("/pages/split/split.html", { pageURL: pageURL });            
        }
    });

    function initializeAppBar() {
        polulateGallerySelector()

        document.querySelector(".bing").addEventListener("click", function () {
            Data.loadGalleryAtIndex(Data.resolveGalleryReference({name: "Bing"}), { keyword: document.querySelector(".search-keyword").value });
        });

        document.querySelector(".search-keyword").addEventListener("focus", function () {
            this.value = "";
        });

        var gallerySelector = document.querySelector(".gallerySelector");
        gallerySelector.addEventListener("change", function (evt) {
            var select = evt.target;
            if (select.selectedIndex >= 0) {
                Data.loadGalleryAtIndex(select.selectedIndex);
            };
        });
                
        function polulateGallerySelector() {
            var gallerySelector = document.querySelector(".gallerySelector");
            var curGalleryIdx = Data.getGalleryIdx();

            Data.initializeGallery().forEach(function (g, index) {
                if (g.type != "search") {
                    var option = document.createElement("option");
                    if (index === curGalleryIdx) {
                        option.selected = "selected";
                    }
                    option.text = (index + 1) + ") " + g.name;
                    option.value = index;
                    gallerySelector.appendChild(option);
                }
            });
        }
    }
})();
